<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8"/>

    <title>角色管理 - 管理平台</title>

    <link rel="stylesheet" href="/static/ace/components/_mod/jquery-ui/jquery-ui.css" />
    <link rel="stylesheet" href="/static/ace/components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
    <link rel="stylesheet" href="/static/ace/components/_mod/jqgrid/ui.jqgrid.css" />
    <link href="/static/ztree/css/zTreeStyle.css" rel="stylesheet" />

    <style type="text/css">
        .customBtn {
            line-height: 20px;
            margin-bottom: 3px;
        }
        .btnLine {
            margin-left: 1px;
            margin-top: 8px;
            margin-bottom: 2px;
        }

    </style>
</head>
<body>
    <div class="row">
        <div class="row btnLine" >
            <div class="button-len col-sm-12">
                <shiro:hasPermission name="ROLE:ADD">
                    <button class="btn btn-white btn-sm btn-purple customBtn" id="addCargo">
                        <i class="ace-icon fa fa-plus-circle purple"></i> 新增
                    </button>
                </shiro:hasPermission>

                <shiro:hasPermission name="ROLE:EDIT">
                    <button class="btn btn-white btn-info btn-sm customBtn" id="editShop">
                        <i class="ace-icon fa fa-pencil blue"></i> 修改
                    </button>
                </shiro:hasPermission>
                <shiro:hasPermission name="ROLE:AUTHORIZATION">
                    <button class="btn btn-white btn-danger btn-sm customBtn" id="roleAuthorization">
                        <i class="ace-icon fa fa-flag red"></i> 授权
                    </button>
                </shiro:hasPermission>
                <input class="input-sm" type="text" id="userName" style="margin-left: 20px;"
                       placeholder="角色名称" />
<!--                <%&#45;&#45;<input class="input-sm" type="text" id="phone" style="margin-left: 5px;"-->
<!--                           placeholder="手机号">&#45;&#45;%>-->
<!--                <%&#45;&#45;	<select id="stateInput">-->
<!--                <option value="-1">==审核状态==</option>-->
<!--                <option value="3">待审核</option>-->
<!--                <option value="1">通过</option>-->
<!--                <option value="4">拒绝</option>-->
<!--                <option value="0">无效</option>-->
<!--            </select>&#45;&#45;%>-->
                <button class="btn btn-sm btn-white btn-info search-len customBtn"
                        onclick="searchShop()">
                    <i class="ace-icon fa fa-search orange"></i>搜索
                </button>
            </div>
        </div>

        <div class="col-xs-12">

            <table id="grid-table"></table>

            <div id="grid-pager"></div>

        </div>
    </div>

    <div id="authorizationInfoContent" class="hide">
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>

        </div>

        <div>
            <button id="roleAuthorizationBtn" class="btn btn-success btn-sm" style="left: 700px;top: 430px;position: fixed;">确认</button>
        </div>
    </div>

    <!-- page specific plugin scripts -->
    <script type="text/javascript" src="/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="/static/ace/components/jqGrid/js/jquery.jqGrid.js"></script>
    <script type="text/javascript" src="/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js"></script>
    <script type="text/javascript" src="/static/layer/layer.js"></script>
    <script type="text/javascript" src="/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript">
        var scripts = [null,"/static/ace/components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js","/static/ace/components/jqGrid/js/jquery.jqGrid.js","/static/ace/components/jqGrid/js/i18n/grid.locale-cn.js","/static/layer/layer.js","/static/ztree/js/jquery.ztree.core-3.5.js", "/static/ztree/js/jquery.ztree.excheck-3.5.js", null]
        $('.page-content-area').ace_ajax('loadScripts', scripts, function() {

            jQuery(function($) {
                var grid_selector = "#grid-table";
                var pager_selector = "#grid-pager";


                var parent_column = $(grid_selector).closest('[class*="col-"]');
                //resize to fit page size
                $(window).on('resize.jqGrid', function () {
                    $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
                })

                //resize on sidebar collapse/expand
                $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
                    if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
                        //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                        setTimeout(function() {
                            $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
                        }, 20);
                    }
                })

                jQuery(grid_selector).jqGrid({
                    //direction: "rtl",

                    //subgrid options
                    subGrid : false,
                    url: "/sys/role/getRoleInfo",
                    //data: grid_data,
                    datatype: "json",
                    mtype : 'POST',
                    height: 300,
                    colNames:['ID','角色名称','ROLE_KEY', '状态','修改时间','创建时间','店铺权限'],
                    colModel:[
                        {name:'id',index:'id', width:60, editable: true},
                        {name:'roleName',index:'roleName',width:90, editable:true, sortable:false},
                        {name:'roleKey',index:'roleKey', width:70, editable: true,  sortable:false},
                        {name:'state',index:'state', width:90, editable: true, sortable:false,edittype:'select',editoptions: {value: "0:有效;1:无效"}},
                        {name:'gmtModifiedStr',index:'gmtModifiedStr', width:150, editable: false},
                        {name:'gmtCreateStr',index:'gmtCreateStr', width:150, editable: false},
                        {name:'roleNo',index:'roleNo', width:150, editable: true, sortable:false, hidden: true, edittype:'select',editoptions: {value: ":无;29:所有店铺;27:区域店铺"},
                            formatter:function(cellvalue, options, rowObject) {
                                var roleNo = '-'
                                if(cellvalue == '29'){
                                    roleNo = '所有店铺'
                                }
                                if(cellvalue == '27'){
                                    roleNo = '区域店铺'
                                }
                                return roleNo;
                            }
                        }

                    ],
                    sortname : "gmtModifiedStr",
                    sortorder : "desc",
                    viewrecords : true,
                    rowNum:10,
                    rowList:[10,20,30],
                    pager : pager_selector,
                    altRows: true,
                    //toppager: true,

                    multiselect: false,
                    //multikey: "ctrlKey",
                    multiboxonly: true,

                    loadComplete : function() {
                        var table = this;
                        setTimeout(function(){
                            styleCheckbox(table);

                            updateActionIcons(table);
                            updatePagerIcons(table);
                            enableTooltips(table);
                        }, 0);
                    },

                    editurl: "/sys/role/editRoleInfo",//nothing is saved
                    caption: "角色信息",
                    jsonReader : {
                        root:"recordList",
                        page: "currentPage",
                        total: "pageCount",
                        records: "recordCount"
                    }

                    //,autowidth: true,


                    /**
                     ,
                     grouping:true,
                     groupingView : {
                     groupField : ['name'],
                     groupDataSorted : true,
                     plusicon : 'fa fa-chevron-down bigger-110',
                     minusicon : 'fa fa-chevron-up bigger-110'
                },
                     caption: "Grouping"
                     */

                });
                $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

                $("#editShop").click(function() {
                    var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
                    if (!id) {
                        $.jgrid.info_dialog( "提示：", "请选择一条角色信息");
                        return;
                    }
                    $(grid_selector).jqGrid("editGridRow",id,{
                        // edit record form
                        width : 500,
                        closeAfterEdit : true,
                        //editData :
                        recreateForm : true,
                        viewPagerButtons : false,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                                .wrapInner('<div class="widget-header" />');
                            style_edit_form(form);
                        },
                        afterSubmit : function(response, postdata) {
                            var result = eval('('+ response.responseText + ')');
                            //console.log(result);
                            return [result.success,result.message,0] ;
                        },
                        errorTextFormat : function(response) {
                            //console.log("错误"+response.responseText);
                            //var result = response.responseText;
                            return "服务器异常，稍后再试";
                        }
                    });
                });

                var modalIndex = null;

                $("#roleAuthorization").click(function(){
                    var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
                    if (!id) {
                        $.jgrid.info_dialog( "提示：", "请选择一条角色信息");
                        return;
                    }
                    layer.load(1);
                    var setting = {
                        check: {
                            enable: true,
                            chkStyle: "checkbox",
                            //chkboxType: { "Y" : "p", "N" : "ps" }
                        },
                        data: {
                            simpleData: {
                                enable: true ,
                                idKey: "id",
                                pIdKey: "pId",
                                rootPId: null,
                            }
                        },
                        /*callback: {
                            onCheck: zTreeOnCheck
                        },*/
                        /* 	async: {
                         enable: true,
                         dataType: "json",
                         type: "post",
                         contentType: "application/x-www-form-urlencoded",
                         url: "{ctx}/api/cloudling/findChlChannel",
                         autoParam: ["id", "pId" ,"cck"]
                         } */
                    };

                    var zNodes =[];

                    $.ajax({
                        url : "/sys/role/getPrivilegesByRoleId?roleId="+id,
                        type : "get",
                        dataType : "json",
                        async : false,
                        success : function(data) {
                            layer.closeAll('loading');
                            if (data.success) {
                                zNodes = data.data;
                                console.log(zNodes)
                                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                                $("#authorizationInfoContent").removeClass("hide")
                                modalIndex = layer.open({
                                    type: 1,
                                    title: '修改角色权限',
                                    closeBtn: 1,
                                    shadeClose: true,
                                    maxmin: true,
                                    area: ['800px', '500px'],
                                    skin: 'yourclass',
                                    content: $("#authorizationInfoContent"),
                                    end: function () {
                                        $("#authorizationInfoContent").addClass("hide")
                                    }
                                });
                            }else {
                                layer.msg(data.message)
                            }
                        },
                        error : function () {
                            layer.closeAll('loading');
                            layer.msg("网络异常")
                        }


                    });


                })

                $("#roleAuthorizationBtn").click(function () {
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                        nodes = zTree.getChangeCheckedNodes();
                    if (nodes.length == 0) {
                        layer.msg("权限没有被修改")
                        return
                    }
                    layer.load(1);
                    var checkedNode = [];//用来存储被选择的节点
                    var cancelCheckedNode = []; //用来存储被取消选择的节点
                    /*<![CDATA[*/
                    for (var i=0, l=nodes.length; i<l; i++) {
                        if(nodes[i].checked) {
                            checkedNode = checkedNode.concat(nodes[i].id);
                        }else {
                            cancelCheckedNode = cancelCheckedNode.concat(nodes[i].id);
                        }
                    }
                    /*]]>*/
                    //console.log(checkedNode)
                    //console.log(cancelCheckedNode)
                    var id = $(grid_selector).jqGrid('getGridParam', 'selrow');
                    $.ajax({
                        url : "/sys/role/roleAuthorization",
                        type : "post",
                        dataType : "json",
                        async : false,
                        data : {
                            roleId : id,
                            checkedNode : checkedNode.join(","),
                            cancelCheckedNode : cancelCheckedNode.join(",")
                        },
                        success : function(data) {
                            layer.closeAll('loading');
                            if (data.success) {
                                layer.close(modalIndex)
                            }
                            layer.msg(data.message)
                        },
                        error : function () {
                            layer.closeAll('loading');
                            layer.msg("网络异常")
                        }


                    })

                })

                $("#addCargo").click(function () {
                    $(grid_selector).jqGrid("editGridRow",'new',{
                        //new record form
                        //width: 700,
                        closeAfterAdd: true,
                        recreateForm: true,
                        viewPagerButtons: false,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                                .wrapInner('<div class="widget-header" />')
                            style_edit_form(form);
                        },
                        afterSubmit : function(response, postdata) {
                            var result = eval('('+ response.responseText + ')');
                            ////console.log(result);
                            return [result.success,result.message,0] ;
                        },
                        errorTextFormat : function(response) {
                            //console.log("错误"+response.responseText);
                            //var result = response.responseText;
                            return "服务器异常，稍后再试";
                        }
                    });

                })


                //enable search/filter toolbar
                //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
                //jQuery(grid_selector).filterToolbar({});


                //switch element when editing inline
                function aceSwitch( cellvalue, options, cell ) {
                    setTimeout(function(){
                        $(cell) .find('input[type=checkbox]')
                            .addClass('ace ace-switch ace-switch-5')
                            .after('<span class="lbl"></span>');
                    }, 0);
                }
                //enable datepicker
                function pickDate( cellvalue, options, cell ) {
                    setTimeout(function(){
                        $(cell) .find('input[type=text]')
                            .datepicker({format:'yyyy-mm-dd' , autoclose:true});
                    }, 0);
                }


                //navButtons
                jQuery(grid_selector).jqGrid('navGrid',pager_selector,
                    { 	//navbar options
                        edit: false,
                        editicon : 'ace-icon fa fa-pencil blue',
                        add: false,
                        addicon : 'ace-icon fa fa-plus-circle purple',
                        del: false,
                        delicon : 'ace-icon fa fa-trash-o red',
                        search: false,
                        searchicon : 'ace-icon fa fa-search orange',
                        refresh: true,
                        refreshicon : 'ace-icon fa fa-refresh green',
                        view: false,
                        viewicon : 'ace-icon fa fa-search-plus grey',
                    },
                    {
                        //edit record form
                        //closeAfterEdit: true,
                        //width: 700,
                        recreateForm: true,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                            style_edit_form(form);
                        }
                    },
                    {
                        //new record form
                        //width: 700,
                        closeAfterAdd: true,
                        recreateForm: true,
                        viewPagerButtons: false,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                                .wrapInner('<div class="widget-header" />')
                            style_edit_form(form);
                        }
                    },
                    {
                        //delete record form
                        recreateForm: true,
                        beforeShowForm : function(e) {
                            var form = $(e[0]);
                            if(form.data('styled')) return false;

                            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                            style_delete_form(form);

                            form.data('styled', true);
                        },
                        onClick : function(e) {
                            //alert(1);
                        }
                    },
                    {
                        //search form
                        recreateForm: true,
                        afterShowSearch: function(e){
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                            style_search_form(form);
                        },
                        afterRedraw: function(){
                            style_search_filters($(this));
                        }
                        ,
                        multipleSearch: true,
                        /**
                         multipleGroup:true,
                         showQuery: true
                         */
                    },
                    {
                        //view record form
                        recreateForm: true,
                        beforeShowForm: function(e){
                            var form = $(e[0]);
                            form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                        }
                    }
                )



                function style_edit_form(form) {
                    //enable datepicker on "sdate" field and switches for "stock" field
                    //form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})

                    //form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
                    //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
                    //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


                    //update buttons classes
                    var buttons = form.next().find('.EditButton .fm-button');
                    buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
                    buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
                    buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

                    buttons = form.next().find('.navButton a');
                    buttons.find('.ui-icon').hide();
                    buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
                    buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
                }

                function style_delete_form(form) {
                    var buttons = form.next().find('.EditButton .fm-button');
                    buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
                    buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
                    buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
                }

                function style_search_filters(form) {
                    form.find('.delete-rule').val('X');
                    form.find('.add-rule').addClass('btn btn-xs btn-primary');
                    form.find('.add-group').addClass('btn btn-xs btn-success');
                    form.find('.delete-group').addClass('btn btn-xs btn-danger');
                }
                function style_search_form(form) {
                    var dialog = form.closest('.ui-jqdialog');
                    var buttons = dialog.find('.EditTable')
                    buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
                    buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
                    buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
                }

                function beforeDeleteCallback(e) {
                    var form = $(e[0]);
                    if(form.data('styled')) return false;

                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_delete_form(form);
                    form.data('styled', true);
                }

                function beforeEditCallback(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_edit_form(form);
                }



                //it causes some flicker when reloading or navigating grid
                //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
                //or go back to default browser checkbox styles for the grid
                function styleCheckbox(table) {
                    /**
                     $(table).find('input:checkbox').addClass('ace')
                     .wrap('<label />')
                     .after('<span class="lbl align-top" />')


                     $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                     .find('input.cbox[type=checkbox]').addClass('ace')
                     .wrap('<label />').after('<span class="lbl align-top" />');
                     */
                }


                //unlike navButtons icons, action icons in rows seem to be hard-coded
                //you can change them like this in here if you want
                function updateActionIcons(table) {
                    /**
                     var replacement =
                     {
                    'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
                    'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
                    'ui-icon-disk' : 'ace-icon fa fa-check green',
                    'ui-icon-cancel' : 'ace-icon fa fa-times red'
                };
                     $(table).find('.ui-pg-div span.ui-icon').each(function(){
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                })
                     */
                }

                //replace icons with FontAwesome icons like above
                function updatePagerIcons(table) {
                    var replacement =
                        {
                            'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
                            'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
                            'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
                            'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
                        };
                    $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                        var icon = $(this);
                        var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                        if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                    })
                }

                function enableTooltips(table) {
                    $('.navtable .ui-pg-button').tooltip({container:'body'});
                    $(table).find('.ui-pg-div').tooltip({container:'body'});
                }

                //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

                $(document).one('ajaxloadstart.page', function(e) {
                    $.jgrid.gridDestroy(grid_selector);
                    $('.ui-jqdialog').remove();
                });












            });
        });
    </script>
    <script type="text/javascript">
        /**
         * 搜索店铺
         */
        function searchShop() {
            var userName = $("#userName").val();
            var phone = $("#phone").val();
            //var parentDepartmentkey = $("#id_parentDepartmentkey_name").val();

            var filters = {
                "rules" : [ {
                    "field" : "username",
                    "data" : userName
                }, {
                    "field" : "phone",
                    "data" : phone
                }]
            };
            jQuery("#grid-table").jqGrid('setGridParam', {
                postData : {
                    "filters" : JSON.stringify(filters) //"{'rules' : [{'field' : 'shopName','data' : "+shopName+"},{'field' : 'state','data' : "+state+"}]}"
                }
            }).trigger("reloadGrid");
        }



    </script>

</body>
</html>